<!-- 列表 -->
<template>
  <div class="list">
    <!-- 列表数据 -->
    <div class="ulist">
      <!-- 列表数据 -->
      <div class="list_data">
        <!-- <div class="add">
          <el-button type="primary" round @click="addlist()">添加课程分类</el-button>
        </div> -->
        <table-list :tableData="tableData" :listHeader="listHeader" @operate="operate" :type="type"></table-list>
        <!-- 分页 -->
        <div class="paging">
          <paging-list @Listdata="getChilddptwo" :addNum="addNum"></paging-list>
        </div>
      </div>
    </div>

    <!-- 弹出详情 -->
    <el-dialog title="角色详情" :visible.sync="dialogTableVisible">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称">
          <el-input v-model="ruleForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="ment_list"
            default-expand-all
            :default-expanded-keys="show_list"
            :default-checked-keys="show_list"
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            show-checkbox
          ></el-tree>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog title="编辑列表" :visible.sync="dialogTableVisibles">
      <!-- 添加公告内容 -->
      <div class="content">
        <span class="text">分类名称：</span>
        <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1"></el-input>
      </div>
      <!-- 显示状态 -->
      <div class="content">
        <span class="text">显示状态：</span>
        <el-switch
          style="display: block"
          v-model="value"
          active-color="#13ce66"
          active-value="1"
          inactive-value="0"
          active-text="已启用"
          inactive-text="已禁用"
        ></el-switch>
      </div>
      <!-- 添加公告内容 -->
      <div class="content">
        <span class="text">排序：</span>
        <el-input type="Number" placeholder="请输入1~99的合法数字" v-model="sort" max="100" min="1"></el-input>
      </div>
      <!-- 备注 -->
      <div class="content">
        <span class="text">备注：</span>
        <el-input type="textarea" placeholder="请备注" v-model="remake"></el-input>
      </div>
      <div class="but">
        <el-button type="primary" round @click="submitForm()">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableList from "../../../components/List/TableList";
import PagingList from "../../../components/List/PagingList";
export default {
  data() {
    return {
      placeholder: "请输入手机号", //input框中的placehould
      content: "", //input收入值
      //   value: "", //单时间日期
      Bnumber: 10, //每页条数
      Pnumber: 1, //当前页数
      addNum: 0, //总共多少条数
      selectname: "", //下拉列表内容
      tableData: [], //列表数据
      listHeader: [], //列表的渲染部分
      datas: {}, //列表操作返回的数据
      type: "courselist", //列表类型
      Role_list: [], //可选择角色列表
      show_list: [], //展示列表
      ruleForm: {
        name: ""
      },
      dialogTableVisible: false, //点击展示详情
      dialogTableVisibles: false, //点击修改角色
      ment_list: [], //后台菜单列表
      defaultProps: {
        children: "child",
        label: "name"
      },
      textarea1: "", //公告内容
      value: "", //显示状态
      sort: "", //排序
      search_textarea1: "", //搜索内容
      search_value: "", //搜索状态
      remake: "", //备注内容
      catelist: [], //二级列表
      pid: "" ,//对应一级的id
      course_cate_id:"",
    };
  },
  components: {
    TableList,
    PagingList
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
      this.userAdminList();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    let header_name = ["课程封面",  "课程名称", "课程简介", "课程概述",'课程状态','置顶状态','是否收费','课程价格','课时','加入人数','创建时间','课程分类名']; //列表头部
    let list_content = ["course_cover_img", "course_name", "remake", "content", "is_show",'is_top','is_free','money','class_hour','add_num','create_time','course_cate']; //列表渲染内容字段
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
    // this.catelist = this.$route.query.catelist; //一级传来的二级数据
    // this.pid = this.$route.query.id;
  },
  methods: {
    //获取分页信息
    getChilddptwo(e) {
      this.Pnumber = e.Pnumber;
      this.Bnumber = e.Bnumber;
    },
    //获取详情
    particulars() {
      this.$api
        .courseCateInfo({
          token: this.publick.token(),
          id: this.datas.course_cate_id
        })
        .then(res => {
          let data = res.data;
          console.log(data);
          this.textarea1 = data.catename;
          this.value = data.is_show + "";
          this.sort = data.sort;
          this.remake = data.remake;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "addup") {
        //    跳转下级列表
      } else if (this.datas.type == "delect") {
        // 删除
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api
              .courseCateDel({
                token: this.publick.token(),
                id: this.datas.course_cate_id
              })
              .then(res => {
                console.log(res);
                this.$message({
                  type: "success",
                  message: res.message
                });
                this.$router.push({
                  path: "/courseclassifylist",
                  query: {
                    type: "addlist"
                  }
                });
              })
              .catch(res => {
                console.log(res);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (this.datas.type == "amend") {
        // 修改
        this.dialogTableVisibles = true;
        this.particulars();
      }
    },
    userAdminList() {
      //获取公告列表
      this.$api
        .getCoursecateCourse({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber,
          course_cate_id:this.course_cate_id
        })
        .then(res => {
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //提交修改
    submitForm() {
      this.$api
        .courseCateSave({
          catename: this.textarea1,
          is_show: this.value,
          sort: this.sort,
          token: this.publick.token(),
          pid: this.pid,
          remake: this.remake,
          id: this.datas.course_cate_id
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.dialogTableVisibles = false;
          this.$router.push({
            path: "/courseclassifylist",
            query: {
              type: "addlist"
            }
          });
        })
        .catch(res => {
          console.log(res);
        });
    },
    //添加列表事件
    addlist() {
      this.$router.push({
        path: "/addcourseclassify",
        query: {
          id: this.pid
        }
      });
    },
    // 点击搜索列表
    search_list() {
      //获取公告列表
      this.$api
        .articleCateList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber,
          catename: this.search_textarea1
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 点击恢复全部数据
    q_list() {
      this.userAdminList();
    }
  },
  watch: {
    Bnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    Pnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    $route: function() {
      if (this.$route.query.course_cate_id) {
        this.course_cate_id = this.$route.query.course_cate_id; 
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.list {
  width: 100%;
  height: 89vh;
  background: #fff;
  overflow: auto;
}
.ulist {
  background: #fff;
  width: 98%;
  margin: auto;
  margin-top: 2.5vh;
}
.screen {
  display: flex;
  height: 8vh;
  justify-content: flex-start;
  align-items: center;
}
.list_data {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.paging {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 4vh;
  padding-bottom: 2vh;
}
.add {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content {
  width: 95%;
  height: 10vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.text {
  font-size: 12px;
  width: 20%;
  text-align: right;
}
.but {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}
.search {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.s_content {
  width: 35%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 10%;
  margin-left: 10%;
}
.s_stort {
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>